<template>
  <el-tabs class="options-container" type="border-card">
    <el-tab-pane>
      <template #label>
        <span><i class="el-icon-circle-check"></i>修改配置项</span>
      </template>
<!--      页面刚挂载，不显示子组件，当数据获取完成后，再显示该组件-->
      <update-options  :optionsData="optionsData"/>
    </el-tab-pane>
    <el-tab-pane>
      <template #label>
        <span><i class="el-icon-circle-plus-outline"></i>新增配置项</span>
      </template>
      <!--      页面刚挂载，不显示子组件，当数据获取完成后，再显示该组件-->
      <add-options  :labelData="labelData"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts">

import {defineComponent,  ref,onMounted} from 'vue'
import {errorMessage} from '/@/utils/message'
import {getOptionsData} from "/@/api";
import {endLoading, startLoading} from "/@/utils/loading";
import updateOptions from "/@/views/options/updateOptions.vue";
import addOptions from '/@/views/options/addOptions.vue'
export default defineComponent({
  name:'',
  components:{
    updateOptions,
    addOptions
  },
  setup(){
    const optionsData=ref<any>(null)
    const labelData=ref<Array<string>>([])
    // 页面挂载完成后，渲染数据到视图上
    onMounted(()=>{
      startLoading()
      getData()
    })
    const getData=async ()=>{
      try{
        // 获取全部下拉列表项
        optionsData.value=await getOptionsData()
        // 获取要素名称列表
        labelData.value=optionsData.value.map(item=>item.codeTableName)
        // 关闭加载动画
        endLoading()
      }catch (e){
        errorMessage('网络错误！！！')
        endLoading()
      }
    }
    return {
      optionsData,
      labelData
    }
  }
})

</script>

<style lang='scss' scoped>
.options-container{
  position: relative;
  z-index: -1;
}
</style>
